<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            text-align: left;
            padding: 8px;
        }
        tr:nth-child(even) {background-color: #f2f2f2;}
        th {
            background-color: #1b55d2;
            color: white;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar bg-body-tertiary" style="background-color: #1b55d2;height: 50px;width: 100%;">
      </nav>
      <input type="text" id="name" placeholder="Name">
      <input type="text" id="position" placeholder="Position">
      <input type="text" id="email" placeholder="Email">

<button onclick="addRow()">添加</button>

<table>
    <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>职位</th>
        <th>邮箱</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>张三分</td>
        <td>开发</td>
        <td>zs@123.com</td>
        <td>
            <button onclick="deleteRow(this)">删除</button>
            <button onclick="editRow(this)">修改</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>李四</td>
        <td>开发</td>
        <td>ls@123.com</td>
        <td>
            <button onclick="deleteRow(this)">删除</button>
            <button onclick="editRow(this)">修改</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>王五</td>
        <td>开发</td>
        <td>ww@123.com</td>
        <td>
            <button onclick="deleteRow(this)">删除</button>
            <button onclick="editRow(this)">修改</button>
        </td>
    </tr>
    <!-- more rows... -->
</table>
<button onclick="selectAll()">全选</button>
<button onclick="selectInverse()">反选</button>
<button onclick="deleteSelected()">删除所选</button>
<button onclick="clearTable()">清空</button>
<script>
    function addRow() {
        var name = document.getElementById("name").value;
        var position = document.getElementById("position").value;
        var email = document.getElementById("email").value;

        var table = document.getElementsByTagName("table")[0];
        var row = table.insertRow(-1);
        var checkboxCell = row.insertCell(0);
        var nameCell = row.insertCell(1);
        var positionCell = row.insertCell(2);
        var emailCell = row.insertCell(3);
        var actionCell = row.insertCell(4);

        checkboxCell.innerHTML = '<input type="checkbox">';
        nameCell.innerHTML = name;
        positionCell.innerHTML = position;
        emailCell.innerHTML = email;
        actionCell.innerHTML = '<button onclick="deleteRow(this)">删除</button>' +
            '<button onclick="editRow(this)">修改</button>';
    }

    function deleteRow(button) {
        var row = button.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }

    function editRow(button) {
        // 获取表格
var table = document.getElementsByTagName("table")[0];

// 获取模态框
var modal = document.querySelector(".modal");

// 遍历表格中的每一行
for (var i = 1; i < table.rows.length; i++) {
    // 获取当前行
    var row = table.rows[i];

    // 获取“修改”按钮
    var editButton = row.cells[4].querySelector("button");

    // 添加点击事件监听器
    editButton.addEventListener("click", function () {
        // 设置模态框标题
        modal.querySelector(".modal-title").innerText = "Edit " + row.cells[1].innerText;

        // 设置模态框主体内容
        modal.querySelector(".modal-body p").innerText = "Please enter the updated information here.";

        // 设置模态框确认按钮文本
        modal.querySelector(".modal-footer button.btn-primary").innerText = "Update";

        // 显示模态框
        modal.classList.remove("d-none");
    });

    // 添加关闭模态框的监听器
    modal.querySelector(".modal-footer button.btn-secondary").addEventListener("click", function () {
        modal.classList.add("d-none");
    });

    // 添加保存更改的监听器
    modal.querySelector(".modal-footer button.btn-primary").addEventListener("click", function () {
        // 在这里编写代码以保存更改
        modal.classList.add("d-none");
    });
}
    }

 


    function selectAll() {
        var checkboxes = document.querySelectorAll("table input[type='checkbox']");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = true;
        }
    }

    function selectInverse() {
        var checkboxes = document.querySelectorAll("table input[type='checkbox']");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = !checkboxes[i].checked;
        }
    }

    function deleteSelected() {
        var checkboxes = document.querySelectorAll("table input[type='checkbox']:checked");
        for (var i = 0; i < checkboxes.length; i++) {
            var row = checkboxes[i].parentNode.parentNode;
            row.parentNode.removeChild(row);
        }
    }

    function clearTable() {
        var table = document.getElementsByTagName("table")[0];
        while (table.rows.length > 1) {
            table.deleteRow(-1);
        }
    }
</script>

</body>
</html>